<template>
  <div class="login-box">
      <div class='login' data-aos="fade-down">
        <div class='login-header'>登录</div>
        <div class='form-content'>
          <input type='text' placeholder='账号' class='input-field' v-model="loginForm.name">
          <input type='password' placeholder='密码' class='input-field' v-model="loginForm.password">
          <div class='login-button' @click="userLogin">登录</div>
        </div>
      </div>
  </div>
</template>

<script setup>
import bgi from "@/assets/images/login/loginBgi.jpg"
import { ElMessage } from 'element-plus'
import {useRouter} from "vue-router"
import {createMsg, createMSG, getLocalStorage} from "@/utils/common/common"
import {onMounted, reactive} from "vue"
import {login} from "@/api/User"

const router = useRouter()
const loginForm = reactive({
  name:'',
  password:''
})

onMounted(()=>{
  AOS.init()
})

const userLogin = async () => {
  const {data:res} = await login({
    name:loginForm.name,
    password:loginForm.password
  })
  if (res.code === 200){
    localStorage.setItem('jzcyfh',JSON.stringify({
      name:res.data.name,
      permissions:res.data.permissions,
      department:res.data.department,
      phone:res.data.phone,
    }))
    createMSG('登录成功!','success','false')
    await router.push('/homepage')
  } else {

  }
}
</script>

<style scoped lang="less">
.login-box{
  background-image: url(@/assets/images/login/qianxun.jpg);
  height: 100%;
  width: 100%;
  background-size: cover;
  //background-position: center; /* 图片居中 */
  background-repeat: no-repeat; /* 避免图片重复 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  .login{
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    width: 26vw;
    height: 37vh;
    padding: 0 50px;
    position: absolute;
    left: 11vw;
    top: 29vh;
    border: 1px solid rgba(255, 255, 255, .5);
    box-sizing: border-box;
    box-shadow: -6px 6px 10px 2px rgba(255, 255, 255, .3);
    .login-header {
      font-size: 25px;
      font-weight: bold;
      text-align: center;
      line-height: 10vh;
      letter-spacing: 5px;
      font-family: siyuan;
    }
    .input-field {
      display: block;
      width: 95%;
      margin-bottom: 20px;
      border: 0;
      padding: 10px;
      border-bottom: 1px solid rgb(128, 125, 125);
      font-size: 15px;
      outline: none;
    }

    .input-field::placeholder {
      text-transform: uppercase;
    }

    .login-button {
      text-align: center;
      padding: 10px;
      width: 95%;
      margin-top: 40px;
      background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
      color: #fff;
      border-radius: 8px;
      letter-spacing: 20px;
      font-family: siyuan;
      &:hover{
        cursor: pointer;
      }
    }
    .message {
      text-align: center;
      line-height: 88px;
    }

    a {
      text-decoration-line: none;
      color: #abc1ee;
    }
  }
}
</style>
